<template>
  <div>
    <input v-model="password" type="password" placeholder="Enter your password">
    <button @click="hashPassword">加密</button>
    <p v-if="hashedPassword">Hashed Password: {{ hashedPassword }}</p>
    <button v-if="passwordVisible" @click="hidePassword">隐藏密码</button>
    <button v-else @click="showPassword">显示密码</button>
    <p v-if="passwordVisible">Original Password: {{ password }}</p>
  </div>
</template>

<script>
import md5 from 'js-md5'

export default {
  data() {
    return {
      password: '',
      hashedPassword: '',
      passwordVisible: false
    }
  },
  methods: {
    hashPassword() {
      this.hashedPassword = md5(this.password)
      this.passwordVisible = false // Reset visibility after hashing
    },
    showPassword() {
      this.passwordVisible = true
    },
    hidePassword() {
      this.passwordVisible = false
    }
  }
}
</script>
